<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-table
                :data="rightsList"
                style="width: 100%"
                border
                stripe
            >
            <!-- 序号 -->
                <el-table-column
                    label="#"
                    type="index"

                >
                </el-table-column>

                <!-- 权限名称 -->
                <el-table-column
                    prop="authName"
                    label="权限名称"
                >
                </el-table-column>

                <!-- 路径 -->
                <el-table-column
                    prop="path"
                    label="路径"
                >
                </el-table-column>


                <!-- 权限等级 -->
                <el-table-column
                    label="权限等级"
                >
                    <template v-slot="scope">
                        <el-tag  v-if="scope.row.level == 0">一级</el-tag>
                        <el-tag  type="warning" v-else-if="scope.row.level == 1">二级</el-tag>
                        <el-tag  type="success" v-else>三级</el-tag>
                    </template>
                </el-table-column>
                
            </el-table>
    
        </el-card>

    </div>
</template>
<script>
export default {
    data() {
        return {
            type:'list',
            rightsList:[]
        }
    },
    methods: {
        async rightBook(){
            const { data } = await this.axios.get('rights/'+this.type)
            this.rightsList = data.data
            console.log(data)
        }
    },
    created() {
        this.rightBook()
    },
}
</script>
<style lang="less" scoped>
    
</style>
